Making your first quarto website
Statistician and R developer
Quarto has become one of my main activities post-phd
Quarto is the new way of open source publishing, and it can do so many things:
Reports and books; presentation; websites; … Each is a project.
Today we build a quarto website, and use GitHub Pages to publish it.
webr; …Workshop website with step-by-step tutorial:
https://andreaczhang.github.io/workshop-02quarto/
Workshop website template for you to download and modify:
https://andreaczhang.github.io/template-02quarto/
Please clone the template repository to your local machine :)
Note
You need
(Follow the step-by-step tutorial part 1)
_quarto.yml: meta-data (e.g. layout)index.qmd: homepagestyles.scss: theme (color and fonts)_quarto.ymlIn this file, some basic information of the project is specified, such as project type, layout, theme.
This is where you modify how the website looks like.
project:
type: website
output-dir: docs
website:
page-navigation: true
title: "Zero to Quarto Workshop"
navbar:
left:
- href: index.qmd
text: Home
right:
- icon: github
href: https://github.com
format:
html:
# theme: zephyr
theme: styles.scss
toc: true
index.qmdYour homepage: when others click the URL you shared with them, this is where they land.
Content blocked by --- is the YAML header, which appears at the top of your page. Author, date can be specified here.
---
title: "Zero to Quarto Workshop"
subtitle: "Build your first quarto website (or some other cool things!)"
format:
html:
toc: true
toc-depth: 2
---
Date: **Monday 23 October 2023, 6:30PM to 8:00PM, CEST**
------------------
# Welcome!
Quarto is one of the most discussed topics in the R community for the past year. In the posit conf 2023 that just happened a few weeks ago, there were 23 (!) talks on this open-source publishing system. You can build a personal or organisation website; a course or workshop website; a blog; a scientific report; a presentation; all with the possibility to display and execute code (R, Python, Julia), and for free.
styles.scssThis file is optional; but good to have - when you want to customize the color and fonts.
However, if you are happy with the quarto preset themes, styles.scss is not necessary for the website to work.
/*-- scss:defaults --*/
$theme-black: #4c4c4c;
$theme-white: white;
$theme-grey: #FAFAFA;
$theme-beige: #FFFEF2;
$theme-purple0: #FFF0F5;
$theme-purple1: #E6E6FA;
$theme-purple2: #CBC3E3;
$theme-purple3: #88398A;
$theme-purple4: #9d709e;
$theme-purple5: #562457;
$body-bg: $theme-white;
$body-color: $theme-black; // text color
$headings-color: $theme-purple5; // applies to all
$link-color: $theme-purple4;
Open index.qmd, find the render button. Click.
Do you see a HTML page in your Viewer?
You need two more things before pushing everything to GitHub.
docs in _quarto.ymlproject:
type: website
output-dir: docs
.nojekyll fileIn terminal (or your favorite command line editor),
touch .nojekyll
Render one last time, now commit everything, push to remote (GitHub).
Go to Setting > Pages > Build and deployment, choose Deploy from a branch.
Under Branch, select /docs. Save. It should take less than 1 minute to complete.
Your site should be available at https://your_username.github.io/repo_name.
The location of a new page is specified in _quarto.yml as well.
To add another page in parallel to Home (to the left), add the following lines,
website:
page-navigation: true
title: "Zero to Quarto Workshop"
navbar:
left:
- href: index.qmd
text: Home
- href: your_new_page.qmd
text: Your_new_page_name
Then, create a new your_new_page.qmd document.
You can either copy and paste index.qmd and modify the content; or use the button top-left of Rstudio > Add new quarto document.
Theme is controlled in _quarto.yml as well.
cosmo, zephyr);styles.scss file where you have different colors and fonts.format:
html:
# theme: zephyr
theme: styles.scss
toc: true
It is always a good idea to add an about page to your website!
Try to create an about.qmd file, write a few lines about what kind of website you wnat to create.
Position it to the right of the home page.
Test out a few quarto themes, and/or use different colors specified in styles.scss (optional).
One (of a few) way to add a figure:

 {width=85% fig-align="center"}
One (of a few) way to add a table:
| Default | Left | Right | Center |
|---------|:-----|------:|:------:|
| 12 | 12 | 12 | 12 |
| 123 | 123 | 123 | 123 |
: Table name
Use a code fence (3 backticks) with the language you wish to run the code.
Today we went through 4 steps:
output-dir and .nojekyll)Experiment with adding content to your website:
ggplot2 package to do it)